<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#409EFF"
      text-color="#fff"
    >
      <el-menu-item index="1" @click="toggleClick">
        <img alt="image" src="@/assets/logo.png" />
      </el-menu-item>
    </el-menu>
    <el-dropdown @command="loginOut">
      <span class="el-dropdown-link">
        {{username}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: "myheader",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      username: ""
    };
  },
  created() {
    this.username = localStorage.getItem("username");
  },
  methods: {
    toggleClick() {
      this.$emit("toggleClick");
    },
    loginOut() {
      localStorage.clear();
      location.reload();
    }
  }
};
</script>

<style>
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-popup-parent--hidden .fixed-header {
  padding-right: 0 !important;
}
</style>

<style scoped>
.el-menu.el-menu--horizontal {
  border-bottom: none !important;
}
.el-submenu > .el-submenu__title {
  padding: 20px !important;
}
.el-menu,
.el-menu-item:hover {
  background-color: #409eff !important;
}
.el-dropdown {
  line-height: 60px;
  position: absolute;
  right: 30px;
  top: 0;
}
.el-dropdown-menu {
  padding: 0px;
}
</style>
